import React from 'react';
import { inject, observer } from 'mobx-react';
import { WeaMind, WeaRightMenu, WeaTop, WeaLocaleProvider, WeaDialog, WeaSelect } from 'ecCom';
import * as mobx from 'mobx';
import { Button, Card, Tooltip } from 'antd';
import uniqueId from 'lodash/uniqueId';
import * as API from '../../apis/goal/goalCommon'
import GoalAdd from './GoalAdd';
import '../../style/goal/goalCard.less'
import * as Util from "../../util/Util";
const toJS = mobx.toJS;
const getLabel = WeaLocaleProvider.getLabel;
@inject('goalCommonStore')
@observer
export default class GoalCard extends React.Component {
    constructor(props) {
        window.addNodeGoal = (goalid) => {
            this.onAddGoal(goalid)
        }
        super(props);
        this.state = {
            iframeSrc: "",
            showCard: true, //是否展示卡片
            createvisable: false, //新建的dialog
            showSelect:false, //是否展示select
            pgId:'',
            menu: [
                {
                    key: '1',
                    icon: <i className='icon-coms-Add-to' />,
                    content: getLabel(82, '新建'),
                    onClick: key => { this.onAddGoal(-2) },
                }
            ],
        }
    }

    componentWillMount() {
        const { goalCommonStore } = this.props;
        const { currentOrgId } = goalCommonStore;
        goalCommonStore.goalCard({});
        goalCommonStore.getDateList();
        goalCommonStore.setCondtype("2");
        this.setIfreamSrc("");
    }

    componentDidMount() {

    }

    componentWillReceiveProps(newProps) {
        
    }

    getTopButtonMenu = () => {
        const{goalCommonStore:{showButon}} = this.props;
        if(showButon){
            return [<Tooltip placement="bottom" title={getLabel(508587, '新建目标')}><Button type='primary'  onClick={() => this.onAddGoal()} >{getLabel(82, '新建')}</Button></Tooltip>]
        }else{
            return [];
        }
    }

    onAddGoal = (v) =>{
        this.setState({createvisable:true,pgId:v});
    }

    getButton = () => {
        let buttonsCreate = [
            (<Button type="primary" onClick={this.doSubmit.bind(this)}>{getLabel(86, '保存')}</Button>),
            (<Button type="ghost" onClick={this.onlyClose.bind(this)}>{getLabel(309, '关闭')}</Button>)
        ];
        return buttonsCreate;
    }

    //新建dialog框保存
    doSubmit() {
        this.refs.addgoalref.wrappedInstance.doNewSave();
    }

    //新建dialog框关闭
    onlyClose(optparams) {
        this.setState({ createvisable: false });
    }

    //下拉框改变事件
    onSelectChange(v, type) {
        const { goalCommonStore } = this.props;
        goalCommonStore[type] = v;
        this.setIfreamSrc("");
        if(type == "currentOrgId"){
            this.onChangeOrgType(v)
        }
    }

    // clickCard = (element) =>{
    //     const { goalCommonStore:{setTypeId, setOrgId, setShowButton, setOrgtitle}} = this.props;
    //     setTypeId(element.type);
    //     setOrgId(element.orgId);
    //     setOrgtitle(element.orgName);
    //     this.setState({showSelect:true});
    //     this.setIfreamSrc("");
    //     if(element.canCreate){
    //         setShowButton(true);
    //     }
    // }

    //设置组织类型
    onChangeOrgType = (v) =>{
        const { goalCommonStore:{setTypeId, setOrgId, setShowButton, setOrgtitle, orgCardList}} = this.props;
        setTypeId(orgCardList[v].type);
        setOrgId(orgCardList[v].orgId);
        setOrgtitle(orgCardList[v].orgName);
        this.setIfreamSrc("");
        if(orgCardList[v].canCreate){
            setShowButton(true);
        }else{
            setShowButton(false);
        }
    }

    //层级视图ifream src变化
    setIfreamSrc(pgId) {
        const { goalCommonStore } = this.props;
        const { currentperiod, nowyear, nowmonth, nowseason, condtype, typeId, orgId} = goalCommonStore;
        let key = new Date().getTime();
        if (!Util.isEmpty(pgId)) {
            this.setState({showCard: false,iframeSrc: "/workrelate/goal/data/TreeShowNew.jsp?pgId=" + pgId + "&condtype=" + condtype + "&period=" + currentperiod + "&periody=" + nowyear + "&periodm=" + nowmonth + "&periods=" + nowseason + "&typeId=" + typeId + "&orgId=" + orgId+"&key="+ key });
        } else {
            this.setState({showCard: false,iframeSrc: "/workrelate/goal/data/TreeShowNew.jsp?&condtype=" + condtype + "&period=" + currentperiod + "&periody=" + nowyear + "&periodm=" + nowmonth + "&periods=" + nowseason + "&typeId=" + typeId + "&orgId=" + orgId+"&key="+ key});
        }
    }

    onCallBackSuccess = (pgId) =>{
        this.setIfreamSrc(pgId);
    }

    render() {
        const { goalCommonStore, menuid } = this.props;
        const { orgCardList, yeardata, nowyear, monthdata, nowmonth, seasondata, nowseason, periodData, currentperiod, currentstatus, sortcond, principaler, orgtitle, orgTypeList, currentOrgId} = goalCommonStore;
        const { iframeSrc, showCard, menu, createvisable, showSelect, pgId } = this.state;
        return (
            <div className="wea-goal-card">
                <WeaRightMenu datas={menu} showUrlItem={false} style={{ height: '100%' }}>

                    <WeaTop
                        title={Util.isEmpty(orgtitle)? getLabel(518141, "组织目标") : orgtitle}
                        icon={<i className="icon-coms-implement" />}
                        iconBgcolor='rgb(150, 53, 138)'
                        buttons={this.getTopButtonMenu()}
                        showDropIcon={true}
                    // dropMenuDatas={this.getTopButtonMenu()[1]}
                    />
                    <div className="wea-goal-select">
                        <WeaSelect options={orgTypeList} value={currentOrgId} detailtype={5}  viewAttr={2} style={{ width: 80, marginRight: 10 }} onChange={v => this.onSelectChange(v, "currentOrgId")} />
                        <WeaSelect options={periodData} detailtype={5} value={currentperiod} viewAttr={2} style={{ width: 80, marginRight: 10 }} onChange={v => this.onSelectChange(v, "currentperiod")} />
                        {(currentperiod == 1 || currentperiod == 2 || currentperiod == 3) && <WeaSelect options={toJS(yeardata)} value={nowyear} viewAttr={2} style={{ width: 80, marginRight: 10 }} onChange={v => this.onSelectChange(v, "nowyear")} />}
                        {currentperiod == 1 && <WeaSelect options={toJS(monthdata)} value={nowmonth} viewAttr={2} style={{ width: 80, marginRight: 10 }} onChange={v => this.onSelectChange(v, "nowmonth")} />}
                        {currentperiod == 2 && <WeaSelect options={toJS(seasondata)} value={nowseason} viewAttr={2} style={{ width: 80, marginRight: 10 }} onChange={v => this.onSelectChange(v, "nowseason")} />}
                    </div>
                    {/* {
                        showCard && orgCardList && orgCardList.length > 0 && orgCardList.map((element, index) => {
                            return <Card title={element.orgName} onClick={() => this.clickCard(element)}>
                                <p>{element.hrmName}</p>
                            </Card>
                        })
                    } */}
                    {
                        menuid == 7 && <iframe id="modelView" name="modelView" scrolling="auto"
                            style={{ border: "none" }} src={iframeSrc} width='100%' height={window.innerHeight - 100}></iframe>

                    }
                </WeaRightMenu>
                {<WeaDialog visible={createvisable} title={getLabel(508587, '新建目标')} icon="icon-coms-Add-to" iconBgcolor="#7734FF"
                    buttons={this.getButton()}
                    style={{ width: window.innerWidth * 0.7, height: window.innerHeight - 90 }} closable={true}
                    onCancel={this.onlyClose.bind(this)}>
                    {createvisable && <GoalAdd isDialog={true} height={window.innerHeight - 200} ref="addgoalref" doClose={(optparams) => this.onlyClose(optparams)} sortcond={sortcond} onAddSuccess={(arry, data, openSide, pgId) => this.onCallBackSuccess(pgId)} principaler={principaler} period={currentperiod} nowyear={nowyear} locationKey={new Date().getTime()} pgId={pgId} />}
                </WeaDialog>}

                {/* <Card title="Card title" extra={<a href="#">More</a>} style={{ width: 300 }}>
                <p>Card content</p>
                <p>Card content</p>
                <p>Card content</p>
            </Card> */}
            </div>
        );
    }
}



